<!--  活动模版-->
<template>
  <a-card :bordered='false'>
    <!-- 查询区域 -->
    <search ref='search' :config='searchConfig' @search='search' @getHeight='getHeight' />

    <!-- table区域-begin -->
    <div class='page_table'>
      <vxe-grid
        ref='xGrid'
        v-bind='vexConfig'
        :align='left'
        :border='true'
        :checkbox-config='checkboxConfig'
        :columns='columns'
        :data='dataSource'
        :height='pageHeight-seachHeight-94'
        :loading='loading'
        :resizable='true'
        :showOverflow='true'
        :toolbar-config='tableToolbar'
        size='mini'
        @checkbox-change='selectChangeEvent'
        @checkbox-all='selectChangeEvent'
      >
        <template #toolbar_buttons>
          <!-- 操作按钮区域 -->
          <div class='table-operator'>
            <a-button type='primary' @click='handleAdd'>新增</a-button>
            <a-button type='primary' @click='batchDel'>删除</a-button>
            <a-button type='primary' @click="stateChange(1)">启用</a-button>
            <a-button type='primary' @click="stateChange(0)">禁用</a-button>
            <a-button type='primary' @click="downExportXls('tpm_act_template_service')">导出</a-button>
          </div>
        </template>
        <template #templateCode='{ row,rowIndex }'>
          <a @click='handleDetail(row)'>{{ row.templateCode }}</a>
        </template>
        <template #budgetSubjectsName='{ row,rowIndex }'>
          <span>{{ row.subjectVoList.map(v => v.budgetSubjectsName).join(',') }}</span>
        </template>
        <template #startDateendDate='{ row,rowIndex }'>
          <span>{{ row.startDate + '~' + row.endDate }}</span>
        </template>
        <template #status='{ row }'>
          <a-switch :checked="row.status" size="small" @change="handleStatus(row,$event)"/>
        </template>
        <template #action='{ row,rowIndex }'>
          <a @click='handleEdit(row)'>编辑</a>
        </template>
        <template #pager>
          <vxe-pager
            :currentPage.sync='ipagination.current'
            :layouts="['Total', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump','Sizes', 'FullJump']"
            :page-size.sync='ipagination.pageSize'
            :pageSizes='ipagination.pageSizeOptions'
            :total='ipagination.total'
            @page-change='handlePageChange'>
          </vxe-pager>
        </template>
      </vxe-grid>
    </div>
    <!-- table区域-end -->

    <template-add ref='modalForm' @ok='modalFormOk'></template-add>
  </a-card>
</template>

<script>
import { PageListMixin } from '@/mixins/PageListMixin'
import JEllipsis from '@/components/cn-form/JEllipsis'
import { getAction, postAction } from '@api/manage'
import templateAdd from './model/templateAdd'


export default {
  name: 'activityTemplate',
  mixins: [PageListMixin],
  components: {
  templateAdd, JEllipsis
  },
  data() {
    return {
      description: '活动模版',
      searchConfig: [
        {
          // label:'订单编号',
          type: 'input',
          name: 'templateCode',
          placeholder: '活动模版编号'
        }, {
          // label:'业务员',
          type: 'input',
          name: 'templateName',
          placeholder: '活动模版名称'
        },
        {
          // label:'订单状态',
          type: 'j-select',
          name: 'templateType',
          dictCode: 'template_type',
          placeholder: '模版类型'
        },
        {
          type: 'a-select',
          name: 'status',
          placeholder: '状态',
          option: [
            {
              name: '启用',
              value: 1
            },
            {
              name: '停用',
              value: 0
            }]
        },
        {
          type: 'date-range',
          name: 'date',
          range: ['startDate', 'endDate'],
          placeholder: ['有效期开始时间', '有效期结束时间']

        }


      ],
      // 表头
      columns: [
        { type: 'checkbox', width: 50, fixed: null ,field: 'a',},
        {
          title: '活动模版编号',
          field: 'templateCode',
          minWidth: 120,
          slots: { default: 'templateCode' },
        },
        {
          title: '活动模版名称',
          minWidth: 120,
          field: 'templateName',
        },
        {
          title: '关联预算科目',
          minWidth: 120,
          field: 'budgetSubjectsName',
          slots: {default: 'budgetSubjectsName'}
        },
        {
          title: '模版类型',
          minWidth: 80,
          field: 'templateTypeStr'
        },
        {
          title: '模版有效期',
          minWidth: 100,
          field: 'startDateendDate',
          slots: {default: 'startDateendDate'}
        },
        {
          title: '备注',
          minWidth: 80,
          field: 'remarks',
        },
        {
          title: '创建人',
          minWidth: 80,
          field: 'createName'

        },
        {
          title: '创建时间',
          minWidth: 120,
          field: 'createTime'
        },
        {
          title: '更新人',
          minWidth: 80,
          field: 'updateName'

        },
        {
          title: '更新时间',
          minWidth: 120,
          field: 'updateTime'
        },
        {
          title: '状态',
          fixed: 'right',
          field: 'status',
          minWidth: 80,
          slots: { default: 'status' },
        },
        {
          title: '操作',
          field: 'action',
          minWidth: 120,
          fixed: 'right',
          slots: { default: 'action' },
        }
      ],


      url: {
        // 列表接口
        list: window._CONFIG['domianTpmURL'] + '/acttemplate/tpmActTemplate/findPageList',
        // 详情接口
        detail: window._CONFIG['domianTpmURL'] + '/acttemplate/tpmActTemplate/getInfo',
        // 导出接口
        // exportXlsUrl: window._CONFIG['domianTpmURL']+"budget/tpmBudgetFee/exportXls",
        // 删除接口
        deleteBatch: window._CONFIG['domianTpmURL'] + '/acttemplate/tpmActTemplate/deleteBatch',
        // 启停用接口
        status: window._CONFIG['domianTpmURL'] + '/acttemplate/tpmActTemplate/startOrStop',
        startOrStopUrl: window._CONFIG['domianTpmURL'] + '/acttemplate/tpmActTemplate/startOrStop',
      }
    }
  },
  created() {
    this.queryParam.doc = '订货单'

  },


  // beforeMount() {
  //   const draggingMap = {};
  //   this.columns.forEach((col) => {
  //     draggingMap[col.field] = col.width;
  //   });
  //   const draggingState = Vue.observable(draggingMap);
  //   const resizeableTitle = (h, props, children) => {
  //     let thDom = null;
  //     const { key, ...restProps } = props;
  //     console.log(props)
  //     let col;
  //     // 复选框筛选处理
  //     if (key === 'selection-column') {
  //       col = {};
  //     } else {
  //       col = this.columns.find((item) => {
  //         const k = item.field || item.key;
  //         return k === key;
  //       });
  //     }
  //     // 未设置宽度或者设置不可伸缩时不做伸缩处理
  //     if (!col.width || col.noStretch) {
  //       return <th {...restProps}>{children}</th>;
  //     }
  //     const onDrag = (x) => {
  //       draggingState[key] = 0;
  //       // 设置一个伸缩的最小宽度，防止页面错乱
  //       col.width = Math.max(x, col.minWidth || 30);
  //     };
  //     const onDragstop = () => {
  //       draggingState[key] = thDom.getBoundingClientRect().width;
  //     };
  //     return (
  //       <th
  //         {...restProps}
  //         v-ant-ref={(r) => (thDom = r)}
  //         width={col.width}
  //         class="resize-table-th"
  //       >
  //         {children}
  //         <vue-draggable-resizable
  //           key={col.key}
  //           class="table-draggable-handle"
  //           w={10}
  //           x={col.width||draggingState[key]}
  //           z={1}
  //           axis="x"
  //           draggable={true}
  //           resizable={false}
  //           onDragging={onDrag}
  //           onDragstop={onDragstop}
  //         />
  //       </th>
  //     );
  //   };
  //   this.components = {
  //     header: {
  //       cell: resizeableTitle,
  //     },
  //   };
  // },


  watch: {
    // pageHeight(val){
    //   // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
    //   if(!this.timer){
    //     // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
    //     this.pageHeight = val
    //     this.timer = true
    //     let that = this
    //     setTimeout(function(){
    //       // 打印screenWidth变化的值
    //       console.log(that.pageHeight)
    //       that.timer = false
    //     },100)
    //   }
    // }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    handleChange(value) {
      console.log(`selected ${value}`)
    },
    handleSingle() {
      this.$refs.sendSap.add()
      this.$refs.sendSap.title = '发送SAP'
    },
    handleSap() {
      this.$refs.manualCatchSingle.add()
      this.$refs.manualCatchSingle.title = '手动抓单'
    },
    cityClick(t) {
      this.$refs.basicInformation.edit()
      this.$refs.basicInformation.title = '基础信息'
    },
    handlePageChange(page, pageSize) {
      this.ipagination.current = page
      this.loadData()
    },
    handleSizeChange(current, size) {
      this.ipagination.pageSize = size
      this.loadData()
    }
  }
}
</script>

<style lang='less' scoped>
@import '~@assets/less/common.less';

/deep/ .ant-pagination {
  float: right;
}

///deep/ .resize-table-th {
//  position: relative;
//}
///deep/ .table-draggable-handle {
//  height: 100% !important;
//  bottom: 0;
//  left: auto !important;
//  right: -5px;
//  cursor: col-resize;
//  touch-action: none;
//}

</style>